<template lang="pug">
    div(class="amount-control", v-if="visible")
        div(class="header")
        div(class="body")
            div() {{model.name}}
            div(class="amount")
                span {{model.value.name}}{{model.unit}}
                i(class="iconfont") &#xe60b;

</template>

<script>
    export default {
        name: "control-amount",
        props: {
            model: {
                type: Object,
                default() {
                    return {
                        value: {name: "", value},
                        amount: 0,
                        name: "无标题",
                        unit: "U",
                        max: 0,
                        min: 0,
                        increment: 1
                    };
                }
            },
            visible: {type: Boolean, default: false}
        },
        model: {event: "update", prop: "model"},
        methods: {
            up() {
                if (this.model.value.value < this.model.min) {
                    this.model.value = {value: this.model.min, name: this.model.min};
                    return;
                }
                var value =
                    this.model.value.value == this.model.max
                        ? this.model.min
                        : (this.model.value.value * 10 + this.model.increment * 10) / 10;
                this.model.value = {value, value, name: value};

                if (this.model.onChange) this.model.onChange(this.model);
            },
            down() {
                var value =
                    this.model.value.value <= this.model.min
                        ? this.model.max
                        : (this.model.value.value * 10 - this.model.increment * 10) / 10;
                this.model.value = {value, value, name: value};

                if (this.model.onChange) this.model.onChange(this.model);
            }
        }
    };
</script>

<style lang="less">
    // @mainColor: #212529;
    // @fontColor: #eaeaea;

    // .amount-control {
    //     border: 1px solid @mainColor;
    //     background-color: white;
    //     position: absolute;
    //     top: 0;
    //     bottom: 0;
    //     width: 87%;
    //     text-align: center;
    //     left: 0;
    //     right: 0;
    //     margin: auto;
    //     height: 65%;
    //     font-family: "meixiao";

    //     .header {
    //         background-color: @mainColor;
    //         height: 20%;
    //     }

    //     .body {
    //         padding: 5% 0;

    //         .amount {
    //             background-color: @mainColor;
    //             color: @fontColor;
    //             width: 54%;
    //             margin: auto;
    //             text-align: center;

    //             i {
    //                 font-size: 70%;
    //             }
    //         }
    //     }
    // }
</style>
